<!-- #layout name=default-->
<div id="main" v-cloak>
  <div class="page-header">
    <div>
      <div v-if="isNewContentType">
        <h1 class="title">{{ Kooboo.text.common.ContentType + ': '}}</h1>
        <kb-form
          simple
          ref="form"
          class="pull-left"
          :model="model"
          :rules="rules"
        >
          <kb-form-item prop="name" v-slot="error">
            <div class="form-group" :class="{'has-error' : !!error.error }">
              <input
                class="form-control input-medium"
                v-model="model.name"
                v-kb-tooltip:right.manual.error="error.error"
              />
            </div>
          </kb-form-item>
        </kb-form>
      </div>

      <h1 v-if="!isNewContentType" class="title"
        ><span>Content type</span>: <strong>{{ model.name }}</strong></h1
      >
    </div>
  </div>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" @click.stop="onAdd">New field</a>
    </div>
  </div>
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th class="table-sortable"></th>
        <th>Name</th>
        <th class="table-short">Display name</th>
        <th class="table-short">Control type</th>
        <th class="table-short">Multiple language</th>
        <th class="table-short">Summary field</th>
        <th class="table-short">User editable</th>
        <th class="table-action"></th>
      </tr>
    </thead>
    <tbody class="ui-sortable" v-kb-sortable="notSystemProperties">
      <tr v-for="(item, index) in notSystemProperties">
        <td class="table-sortable"
          ><span class="sortable"><i class="glyphicon glyphicon-list"></i></span
        ></td>
        <td>
          <a
            @click.stop="onEdit($event,item,index,false)"
            style="cursor: pointer"
            >{{item.name}}</a
          >
        </td>
        <td :title="item.displayName">
          {{item.displayName.length > 10 ? item.displayName.substr(0,8) + '...'
          : item.displayName}}
        </td>
        <td
          >{{Kooboo.text.component.controlType[_.camelCase(item.controlType)]}}</td
        >
        <td>
          <span
            :class="item.multipleLanguage? 'label label-sm green': 'label label-sm label-default'"
          >
            {{item.multipleLanguage ? Kooboo.text.common.yes :
            Kooboo.text.common.no}}
          </span>
        </td>
        <td>
          <span
            :class="item.isSummaryField?'label label-sm green':'label label-sm label-default'"
          >
            {{item.isSummaryField ? Kooboo.text.common.yes :
            Kooboo.text.common.no}}
          </span>
        </td>
        <td>
          <span
            :class="item.editable?'label label-sm green':'label label-sm label-default'"
          >
            {{item.editable ? Kooboo.text.common.yes : Kooboo.text.common.no}}
          </span>
        </td>

        <td class="table-action">
          <a class="btn btn-xs red" @click.stop="removeItem($event,index,item)"
            >Remove</a
          >
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="action-row">
        <td colspan="100">
          <a @click.stop="toggleSystemFields">
            <i
              v-kb-tooltip:right="Kooboo.text.site.contentType.showSystemField"
              :class="showSystemField?'fa fa-chevron-down':'fa fa-chevron-down'"
            ></i>
          </a>
        </td>
      </tr>
      <tr v-for="(item,index) in systemProperties" v-if="showSystemField">
        <td class="table-sortable"></td>
        <td>
          <a
            @click.stop="onEdit($event,item,index,true)"
            style="cursor: pointer"
            >{{item.name}}</a
          >
        </td>
        <td :title="item.displayName">
          {{item.displayName.length > 10 ? item.displayName.substr(0,8) + '...'
          : item.displayName}}
        </td>
        <td
          >{{Kooboo.text.component.controlType[_.camelCase(item.controlType)]}}</td
        >
        <td>
          <span
            :class="item.multipleLanguage? 'label label-sm green': 'label label-sm label-default'"
          >
            {{item.multipleLanguage ? Kooboo.text.common.yes :
            Kooboo.text.common.no}}
          </span>
        </td>
        <td>
          <span
            :class="item.isSummaryField?'label label-sm green':'label label-sm label-default'"
          >
            {{item.isSummaryField ? Kooboo.text.common.yes :
            Kooboo.text.common.no}}
          </span>
        </td>
        <td>
          <span
            :class="item.editable?'label label-sm green':'label label-sm label-default'"
          >
            {{item.editable ? Kooboo.text.common.yes : Kooboo.text.common.no}}
          </span>
        </td>
      </tr>
    </tfoot>
  </table>
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="modalVisible"
  >
    <!--v-if="modalShow" function is destroy component and directive-->
    <kb-field-editor
      @on-save="onFieldEditorSave"
      v-if="modalVisible"
      :close-handle="onModalClose"
      :all-items="_.concat(notSystemProperties,systemProperties)"
      :editing-index="editingItemIndex"
      :data="editingItemData"
      :options="fieldEditorOptions"
    ></kb-field-editor>
  </div>
  <div class="page-buttons">
    <button @click="onSave" class="btn green">Save</button>
    <a :href="contentTypesPageUrl" class="btn gray">Cancel</a>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/lib/jquery-ui-customized.js",
      "/_Admin/Scripts/components/kbFieldEditor.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/ContentType.js"></script>
